<template>
	<view class="review-box page-box">
		<view style="height: 148rpx;">
			<u-navbar bgColor="transparent" height="74">
				<view class="u-nav-slot flex-align-center" slot="left" @click="goBack">
					<button plain class="back-btn" @click="goBack">返回</button>
					<span
						style="margin:0 18rpx 0 33rpx;  border-left: 1rpx solid #FFF2F2;width: 1rpx;height: 36rpx;"></span>
					<button plain class="back-btn flex-center">
						<span style="padding-top: 5rpx;">音标</span>
						<image src="@/static/images/tongbu/xuanze.png" style="width: 30rpx;height: 30rpx;" />
					</button>
				</view>
				<view class="u-nav-slot-right flex-align-center" slot="right">
					<button plain class="back-btn">预习</button>
					<view style="width: 40rpx;"></view>
					<button plain class="back-btn">水平测试0分</button>
				</view>
			</u-navbar>
		</view>

		<view class="content">
			<view class="content-son flex-center">
				<view class="content-son-left">
					<view class="content-son-left-item" v-for="(item,index) in unitList" :key="index"
						:class="current=== index ?'active':''" @click="tabChange(index)">
						<span>
							{{item.name}}
						</span>
						<view class="more">
							<span></span>
							<span></span>
							<span></span>
							<span></span>
						</view>
					</view>
				</view>
				<view class="content-son-right">
					<view class="item item1">
						<image src="@/static/images/review/biaoqian1.png" class="tag-img" />
						<view class="flex-align-center">
							<view>
								<view class="title">
									音标跟读
								</view>
								<view class="sub-title flex-center">
									第一遍 0/9
								</view>
							</view>
							<image src="@/static/images/review/dianshi.png" style="width: 132rpx;height: 132rpx;" />
						</view>
					</view>
					<image src="@/static/images/review/youjian.png" style="width: 50rpx;height: 50rpx;" />
					<view class="item item2">
						<image src="@/static/images/review/biaoqian2.png" class="tag-img" />
						<view class="flex-align-center">
							<view>
								<view class="title">
									音标辨认
								</view>
								<view class="sub-title flex-center">
									第一遍 0/9
								</view>
							</view>
							<image src="@/static/images/review/rizhi.png" style="width: 132rpx;height: 132rpx;" />
						</view>
					</view>
					<view class="item item3">
						<image src="@/static/images/review/biaoqian3.png" class="tag-img" />
						<view class="flex-align-center">
							<view>
								<view class="title">
									拼读训练
								</view>
								<view class="sub-title flex-center">
									第一遍 0/9
								</view>
							</view>
							<image src="@/static/images/review/005-d.png" style="width: 92rpx;height: 96rpx;" />
						</view>
					</view>
					<image src="@/static/images/review/youjian.png" style="width: 50rpx;height: 50rpx;" />
					<view class="item item4">
						<image src="@/static/images/review/biaoqian4.png" class="tag-img" />
						<view class="flex-align-center">
							<view>
								<view class="title">
									音标英语
								</view>
								<view class="sub-title flex-center">
									第一遍 0/9
								</view>
							</view>
							<image src="@/static/images/review/yingyong.png" style="width: 84rpx;height: 87rpx;" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="index-right-footer flex-between">
			<span>今日学习效率：0%(00:00/00:00)</span>
			<span>今日词汇记忆 时长:00:00 数量:0个 速度:0个/小时</span>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				current: 0,
				unitList: [{
						id: 1,
						name: 'Unit1'
					},
					{
						id: 2,
						name: 'Unit2'
					},
					{
						id: 3,
						name: 'Unit3'
					},
					{
						id: 4,
						name: 'Unit4'
					},
				]

			};
		},
		methods: {
			goBack() {
				this.$common.goBack()
			},
			tabChange(val) {
				console.log(val);
				this.current = val;
			}
		}
	}
</script>

<style lang="scss">
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.page-box {
		background: radial-gradient(97.5% 97.5% at 50% 50.583333333333336%, rgba(34, 45, 245, 1) 0%, rgba(110, 117, 245, 1) 100%);
	}

	.u-nav-slot-center {
		display: flex;
		align-items: center;
		color: #DBD9D9;
		font-size: px_2_vw(48);

	}

	.u-nav-slot-right {}

	.content {
		margin: 0 auto;
		width: 90%;
		padding: 20rpx;
		height: px_2_vw(847);
		background: #1394FC;
		border-radius: 30rpx;

		.content-son {
			width: 100%;
			height: 100%;
			background-color: #D9D7D7;
			border-radius: 20rpx;
			padding: 10rpx;

			.content-son-left {
				width: px_2_vw(483);
				height: 100%;
				overflow-y: auto;
				background-color: #AFB3F2;
				border-radius: 20rpx;
				padding: 56rpx 0 56rpx 30rpx;

				.content-son-left-item {
					width: 100%;
					// background: #fff;
					border-radius: 18rpx 0 0 18rpx;
					height: px_2_vw(90);
					font-weight: 700;
					font-size: px_2_vw(40);
					display: flex;
					align-items: center;
					justify-content: space-around;
				}
			}

			.content-son-right {
				margin-left: 100rpx;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				height: px_2_vw(600);

				.item {
					width: px_2_vw(433);
					height: px_2_vw(272);
					border-radius: 55rpx;
					padding-left: 40rpx;

					.title {
						font-size: px_2_vw(48);
						color: #fff;
						font-weight: bolder;
					}

					.sub-title {
						width: px_2_vw(197);
						height: px_2_vw(51);
						text-align: center;
						color: #fff;
						font-size: px_2_vw(30);
						margin-top: 35rpx;
						margin-right: 23rpx;
						font-weight: 400;
					}

				}

				.tag-img {
					width: px_2_vw(60);
					height: px_2_vw(50);
				}

				.item1 {
					background: linear-gradient(90deg, #6215E8 0%, #7936FF 100%);

					// margin-bottom: 45rpx;
					.sub-title {
						background: #C0A8ED;
					}
				}

				.item2 {
					background: linear-gradient(90deg, #057AFF 0%, #05E0FC 100%);

					// margin-bottom: 45rpx;
					.sub-title {
						background: #A9DCE8;
					}
				}

				.item3 {
					background: linear-gradient(90deg, #FF5805 0%, #FF8000 100%);

					.sub-title {
						background: #EDC6A6;
					}
				}

				.item4 {
					background: #000DFF;

					.sub-title {
						background: #C0C2F0;
					}
				}
			}
		}
	}

	// 底部
	.index-right-footer {
		color: #fff;
		font-size: 24rpx;
		position: absolute;
		bottom: 37rpx;
		width: 80%;
		left: 10%;
	}

	.active {
		background: #fff;
	}
	.more {
		display: flex;
		align-items: center;
		span {
			width: 15rpx;
			height: 15rpx;
			border: 1rpx solid #000;
			border-radius: 50%;
			margin-right: 5rpx;
		}
	}
</style>